<template>
    <div class="row" v-if="paginator.last_page > 1">
        <div class="col-md-4">
            共{{ paginator.total }}条记录，显示{{ paginator.from }}~{{ paginator.to }}条记录
        </div>
        <div class="col-md-8 text-right">
            <ul class="pagination">
                <li v-bind:class="{disabled: (paginator.current_page == 1)}" v-on:click="changePage(paginator.current_page - 1)"><a href="javascript:void(0);"><span aria-hidden="true">«</span></a></li>
                <li v-if="showFirstPage" v-on:click="changePage(1)"><a href="javascript:void(0);">1</a></li>
                <li v-if="showFirstNull"><a href="javascript:void(0);">...</a></li>
                <li v-for="page in pageGroup" v-on:click="changePage(page)" v-bind:class="{active: (page == paginator.current_page)}"><a href="javascript:void(0);">{{ page }}</a></li>
                <li v-if="showLastNull"><a href="javascript:void(0);">...</a></li>
                <li v-if="showLastPage" v-on:click="changePage(paginator.last_page)"><a href="javascript:void(0);">{{ paginator.last_page }}</a></li>
                <li v-bind:class="{disabled: (paginator.current_page == paginator.last_page)}" v-on:click="changePage(paginator.current_page + 1)"><a href="javascript:void(0);"><span aria-hidden="true">»</span></a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['paginator'],
        data(){
            return {
                defaultNumPages: 7, // 默认导航分页显示个数
            }
        },
        methods: {
            changePage: function(page){
                if(page < 1 || page > this.paginator.last_page){
                    return;
                }
                this.$parent.refresh(page)
            }
        },
        mounted() {

        },
        computed: {
            numPages: function(){ // 导航分页显示个数
                return this.paginator.numPages ? this.paginator.numPages : this.defaultNumPages;
            },
            pageGroup: function(){
                var temp = Math.ceil(this.numPages / 2);
                var first = this.paginator.current_page - temp + 1;
                var last = this.paginator.current_page + temp - 1;
                if(first < 1){
                    first = 1;
                }
                if(last > this.paginator.last_page){
                    last = this.paginator.last_page;
                }
                var x = last - first + 1;
                if(x < this.numPages){
                    last = last + (this.numPages - x);
                    if(last > this.paginator.last_page){
                        last = this.paginator.last_page;
                    }
                    x = last - first + 1;
                    if(first > 1 && x < this.numPages){
                        first = first - (this.numPages - x);
                        if(first < 1){
                            first = 1;
                        }
                    }
                }

                var pageGroup = [];
                for(; first<=last; first++){
                    pageGroup.push(first);
                }
                return pageGroup;
            },
            showFirstPage: function(){
                if(this.pageGroup[0] > 1){
                    return true;
                }
                return false;
            },
            showLastPage: function(){
                if(this.pageGroup[this.pageGroup.length - 1] < this.paginator.last_page){
                    return true;
                }
                return false;
            },
            showFirstNull: function(){
                if(this.pageGroup[0] > 2){
                    return true;
                }
                return false;
            },
            showLastNull: function(){
                if(this.pageGroup[this.pageGroup.length - 1] < this.paginator.last_page - 1){
                    return true;
                }
                return false;
            }
        }
    }
</script>
